<script setup lang="ts">
import { getMedicalOrderLogisticsAPI } from '@/apis/order';
import router from '@/router';
import type { Location, Logistics } from '@/types/order';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()
// 高德地图的使用
import AMapLoader from '@amap/amap-jsapi-loader'
import startImg from '@/assets/start.png'
import endImg from '@/assets/end.png'
import carImg from '@/assets/car.png'

const logisticsList = ref<Logistics>()

onMounted(async () => {
    const res = await getMedicalOrderLogisticsAPI(route.params.id as string)
    // console.log(res)
    logisticsList.value = res.data
    // 高德地图
    initMap()
})

// 加载高德地图
const initMap = () => {
    window._AMapSecurityConfig = {
        securityJsCode: 'bd1fe82c0d90aa7d4982c3f9c4124274'
    }
    AMapLoader.load({
        key: "	a229a547415e42e40d74a64d0bdfbb3c", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    }).then((AMap) => {
        const map = new AMap.Map('map', {
            mapStyle: 'amap://styles/whitesmoke', // 地图的样式
            zoom: 12 // 地图的缩放比例
        })
        // 自动规划路线
        AMap.plugin("AMap.Driving", function () {
            const driving = new AMap.Driving({
                map,
                showTraffic: false, // 设置是否显示实时路况信息，默认设置为true。 显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。
                hideMarkers: true // 设置隐藏路径规划的起始点图标 设置为true：隐藏图标；设置false：显示图标\n默认值为：false
            });
            if (logisticsList.value?.logisticsInfo) {
                const list = [...logisticsList.value.logisticsInfo]

                /**
                * 创建标记
                * @param img 图片
                * @param point 标记的位置
                * @param width 图片的宽度
                * @param height 图片的高度
                */
                const imgMarker = (img: string, point?: Location, width: number = 25, height: number = 30) => {
                    //创建 AMap.Icon 实例：
                    const icon = new AMap.Icon({
                        size: new AMap.Size(width, height), //图标尺寸
                        image: img, //Icon 的图像
                        // imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
                        imageSize: new AMap.Size(width, height), //根据所设置的大小拉伸或压缩图片
                    });
                    // 将 Icon 实例添加到 marker 上:
                    const marker = new AMap.Marker({
                        position: new AMap.LngLat(point?.longitude, point?.latitude), //点标记的位置
                        offset: new AMap.Pixel(-width / 2, -height / 2), //偏移量
                        icon: icon, //添加 Icon 实例
                        // title: "北京",
                        // zooms: [2, 12], //点标记显示的层级范围，超过范围不显示
                    });
                    return marker
                }

                const start = list.shift(); //起始点坐标
                // 引用上面的函数
                const startMarker = imgMarker(startImg, start)
                // 使用
                map.add(startMarker)
                const end = list.pop(); //终点坐标
                const endMarker = imgMarker(endImg, end)
                map.add(endMarker)
                // 设置途径点
                const opts = {
                    waypoints: list.map((item) => [item.longitude, item.latitude]), //途经点参数，最多支持传入16个途经点
                };
                driving.search([start?.longitude, start?.latitude], [end?.longitude, end?.latitude], opts,
                    () => {
                        // 运输完毕
                        // 获取当前的位置
                        const carPoint = logisticsList.value?.currentLocationInfo
                        // console.log(carPoint)
                        const carMarker = imgMarker(carImg, carPoint, 33, 20)
                        map.add(carMarker)
                        // 2秒后控制地图根据车的位置进行缩放
                        setTimeout(() => {
                            map.setFitView([carMarker]), map.setZoom(12)
                        }, 2000)
                    });
            }
        });
    })
        .catch((e) => {
            console.error(e); //加载错误提示
        });
}


</script>

<template>
    <div class="order-logistics-page">
        <div id="map">
            <div class="title">
                <van-icon name="arrow-left" @click="router.back()" />
                <span>{{ logisticsList?.statusValue }}</span>
                <van-icon name="service" />
            </div>
            <div class="current">
                <p class="status">订单{{ logisticsList?.statusValue }} 预计{{ logisticsList?.estimatedTime }}送达</p>
                <p class="predict">
                    <span>{{ logisticsList?.name }}</span>
                    <span>{{ logisticsList?.awbNo }}</span>
                </p>
            </div>
        </div>
        <div class="logistics">
            <p class="title">物流详情</p>
            <van-steps direction="vertical" :active="0">
                <van-step v-for="item in logisticsList?.list" :key="item.id">
                    <p class="status">{{ item.statusValue }}</p>
                    <p class="content">您的订单正在{{ item.statusValue }} {{ item.content }}</p>
                    <p class="time">{{ item.createTime }}</p>
                </van-step>
            </van-steps>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
    --van-step-icon-size: 18px;
    --van-step-circle-size: 10px;
}

#map {
    height: 450px;
    background-color: var(--cp-bg);
    overflow: hidden;
    position: relative;

    .title {
        background-color: #fff;
        height: 46px;
        width: 355px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        font-size: 16px;
        position: absolute;
        left: 10px;
        top: 10px;
        box-sizing: border-box;
        box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
        z-index: 999;

        >span {
            flex: 1;
            text-align: center;
        }

        .van-icon {
            font-size: 18px;
            color: #666;

            &:last-child {
                color: var(--cp-primary);
            }
        }
    }

    .current {
        height: 80px;
        border-radius: 4px;
        background-color: #fff;
        height: 80px;
        width: 355px;
        box-sizing: border-box;
        padding: 15px;
        position: absolute;
        left: 10px;
        bottom: 10px;
        box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
        z-index: 999;

        .status {
            font-size: 15px;
            line-height: 26px;
        }

        .predict {
            color: var(--cp-tip);
            font-size: 13px;
            margin-top: 5px;

            >span {
                padding-right: 10px;
            }
        }
    }
}

.logistics {
    padding: 0 10px 20px;

    .title {
        font-size: 16px;
        padding: 15px 5px 5px;
    }

    .van-steps {
        :deep(.van-step) {
            &::after {
                display: none;
            }
        }

        .status {
            font-size: 15px;
            color: var(--cp-text3);
            margin-bottom: 4px;
        }

        .content {
            font-size: 13px;
            color: var(--cp-tip);
            margin-bottom: 4px;
        }

        .time {
            font-size: 13px;
            color: var(--cp-tag);
        }
    }
}
</style>
